<template>
  <div class="app-container" style="width: 40%">
    <el-form ref="form" :model="driver" label-width="80px"　:rules="rules">
      <el-form-item label="姓名"  prop="name">
        <el-input v-model="driver.name"  ></el-input>
      </el-form-item>

      <el-form-item label="部门" required prop="deptId">
        <el-select  v-model="driver.deptId"  placeholder="选择部门" label-width="80px">
          <el-option
            v-for="item in dept"
            :key="item.id"
            :label="item.text"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="性别" prop="region">
        <el-select v-model="driver.gender" placeholder="选择性别" label-width="80px">
          <el-option
            v-for="item in optionsa"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="生日"  prop="birthday">
        <div class="block"  label-width="80px">
          <el-date-picker
            v-model="driver.birthday"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="身份证" prop="card" required>
        <el-input v-model="driver.card"></el-input>
      </el-form-item>

      <el-form-item label="电话" prop="phone" required>
        <el-input v-model="driver.phone"></el-input>
      </el-form-item>

      <el-form-item label="入职时间"  prop="entrytime">
        <div class="block"  label-width="80px">
          <el-date-picker
            v-model="driver.entrytime"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="地址">
        <el-input v-model="driver.address"></el-input>
      </el-form-item>

      <el-form-item label="驾照号码">
        <el-input v-model="driver.driverNo"></el-input>
      </el-form-item>

      <el-form-item label="驾照类型" prop="region">
        <el-select v-model="driver.driverType" placeholder="选择类型" label-width="80px">
          <el-option
            v-for="item in optionsd"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>



      <el-form-item label="备注">
        <el-input v-model="driver.remarks"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="driver.isdisable" placeholder="选择状态" label-width="80px">
          <el-option
            v-for="item in optionsc"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>



      <el-form-item>
        <el-button type="success" :disabled="saveBtnDisabled" @click="saveOrUpdate('form')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
//-- 导入api
import driverApi from "@/api/rao_driver.js";
//-- 引入组件
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
export default {
  name: "save",
  components: { ImageCropper, PanThumb }, //-- 声明组件
  data() {
    var checkIdentitytionId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      }
      if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error("你输入的身份证长度或格式错误"));
      }
      //身份证城市
      var aCity = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "山西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "黑龙江",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "山东",
        41: "河南",
        42: "湖北",
        43: "湖南",
        44: "广东",
        45: "广西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏",
        61: "陕西",
        62: "甘肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "香港",
        82: "澳门",
        91: "国外"
      };
      if (!aCity[parseInt(value.substr(0, 2))]) {
        callback(new Error("你的身份证地区非法"));
      }
      // 出生日期验证
      var sBirthday = (
          value.substr(6, 4) +
          "-" +
          Number(value.substr(10, 2)) +
          "-" +
          Number(value.substr(12, 2))
        ).replace(/-/g, "/"),
        d = new Date(sBirthday);
      if (
        sBirthday !=
        d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()
      ) {
        callback(new Error("身份证上的出生日期非法"));
      }

      // 身份证号码校验
      var sum = 0,
        weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        codes = "10X98765432";
      for (var i = 0; i < value.length - 1; i++) {
        sum += value[i] * weights[i];
      }
      var last = codes[sum % 11]; //计算出来的最后一位身份证号码
      if (value[value.length - 1] != last) {
        callback(new Error("你输入的身份证号非法"));
      }
      callback();
    };

    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };

    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        phone:'',

      },
      rules: {
        name: [
          {required: true, message: '请输入名字', trigger: 'blur'},
          {min: 3, max: 5, trigger: 'blur'}
        ],
        deptId: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        entrytime: [
          {required: true, message: '请选择日期', trigger: 'change'}
        ],
        birthday: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        type: [
          {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
        ],
        resource: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
        desc: [
          {required: true, message: '请填写活动形式', trigger: 'blur'}
        ],
        phone: [
          {validator: checkPhone, trigger: 'blur'}
        ],
        card: [
          { validator: checkIdentitytionId , trigger: "blur" }
        ]


      },

      dept:{},

      optionsa: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      optionsc: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '未启用'
      }],

      optionsd: [{
        value: 52,
        label: 'C1'
      }, {
        value: '53',
        label: 'C2'
      }, {
          value: '54',
          label: 'A1'
        }, {
        value: '55',
        label: 'A2'
      }, {
        value: '56',
        label: 'B1'
      }, {
        value: '57',
        label: 'B2'
      }],

      driver: {
        name: '',
        deptId: '',
        gender: '',
        birthday: '',
        card: '',
        phone:'',
        entrytime:'',
        address:'',
        driverNo:'',
        driverType:'',
        isdisable:'',
        remarks:''
      },
      imagecropperShow: false,  //-- 控制文件上传的对话框显示
      BASE_API: process.env.BASE_API,
      imagecropperKey: 0,     //-- 一个标记
      saveBtnDisabled: false,
    };
  },
  created() {
    this.init();
    this.getDeptById();
  },
  watch: {
    //-- 监听路由是否有发生变化
    $route(to, form) {
      this.init();
    },
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getDriverById(id);
      } else {
        this.driver = {};
      }
    },
    //-- 保存和更新是同一个页面，那form表单的提交方法
    saveOrUpdate(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.driver.id) {
              this.saveDriver();
            } else {
              this.updateDriver();
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

    },
    //-- 单纯保存的方法
    saveDriver() {
      driverApi.saveDriver(this.driver).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "添加成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/basic_setting/list" });
      });
    },
    //-- 单纯修改的方法
    updateDriver() {
      driverApi.updateDriver(this.driver).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "修改成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/basic_setting/list" });
      });
    },
    getDriverById(id) {
      driverApi.findDriverById(id).then((response) => {
        this.driver = response.data.driver;
      });
    },

    //获得所有的部门
    getDeptById(){
      driverApi.getDept().then((response) => {
        this.dept = response.data.dept;
      });
    }
  },

};
</script>
<style>
</style>
